<template>
    <div id="gameHall">
        <div class="top-wrapper">
            <game-search :showSearch="showBar" @getCloseMsg="hideBar"></game-search>
            <div class="header-bar">
                <div class="name">
                    <i class="icon iconfont" @click="goback">&#xe72d;</i>
                    <span>游戏大厅</span>
                </div>
                <div class="search" @click="showModal">
                    <i class="search-icon"></i>
                    <span>搜游戏</span>
                </div>
            </div>
            <LyTab v-if="category.length"
                v-model="selectedId"
                :items="category"
                :options="options"
                @change="handleChange"
                >
            </LyTab>
        </div>
        <div class="placeholder"></div>
        <div class="main-container">
            <scroll class="more-list" ref="scroll" 
                :data="gamesList" 
                :scrollY="scrollY" 
                :scrollX="scrollX"
                :bounce="bounce" 
                :pullup="pullup" 
                @scrollToEnd="_getMoreList">
                <div class="game-list">
                    <div class="game-list-wrap">
                        <div class="list-wrap" v-for="item in gamesList" :key="item.id">
                            <div class="item" @click="goDetail(item)">
                                <div class="avator">
                                    <img v-lazy="item.game_icon" alt="">
                                </div>
                                <div class="info">
                                    <div class="desc">
                                    <div class="game_msg">
                                        <div class="name">
                                            {{item.gamename}}
                                            <span class="icon_hb" v-if="item.is_red"></span>
                                        </div>
                                        <div class="type">{{item.game_type}}</div>
                                    </div>
                                    <div class="label clearfix">
                                        <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name}}</span>
                                        <!-- <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name | labelFilter }}</span> -->
                                    </div>
                                    </div>
                                    <div class="down">
                                        <span>下载</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </scroll>
        </div>
         <!-- 下拉加载显示 -->
        <div class="loadlist" v-show="gamesList.length">
            <loadinglist :row="row"  :more="more"></loadinglist>
        </div>
        <!-- 初始化页面加载动画 -->
        <div class="loading-wrap" v-show="showLoading">
            <loading></loading>
        </div>
    </div>
</template>

<script>
import {gameCategory,gameList} from "api/game_box"
import gameSearch from './gameSearch'
import Loading from "common/loading"
import Loadinglist from "common/LoadingList"
import Scroll from "common/scroll"
import { Toast } from 'vant'
import {mapState,mapMutations} from 'vuex' 
export default {
  data() {
    return {
      row: true,     //loading文字水平显示
      selectedId: 0,      //选中
      page: 1,            //初始化开服页数
      typeId: 1,          //初始化游戏类型
      showBar:false,
      category: [],
      gamesList:[],
      isload: false, //是否正在加载
      scrollY: true,  //垂直滚动
      scrollX: false, //水平滚动
      pullup: true,   //上拉加载
      beforeScroll: true,
      bounce: false,  //动画
      more:true,      //下拉加载是否还有更多
      showLoading:true,
      options: {
        labelKey: "name",
        activeColor: "#00d8cd",
      }
    };
  },
  created(){
       this.init();
  },
   filters:{
      labelFilter(text){
          return text.substr(0,8);
      }
  },
  methods:{
      init(){
          this.getCategory();
          this.getList();
      },
      getCategory(){
          let id=this.$route.params.id;
          let index=this.$route.params.index;
          if(id){
            this.typeId=id;
            this.selectedId=parseInt(index);
          }
          gameCategory().then(res=>{
             if(res.data.error==0){
                this.category=res.data.content;
             }
        })
      },
      getList(){
          gameList("",this.page,"",this.typeId,"","").then(res=>{
              if(res.data.error==0){
                  this.showLoading=false;
                  let totalPage=res.data.content.totalPage;
                  this.gamesList=res.data.content.data;
                  if(this.page==totalPage){
                    this.more = false;
                    this.isload = true;
                   }
                  this.gamesList=res.data.content.data;
              }else{
                  this.showLoading=false;
                  this.more = false;
                  this.isload=true;
              }
          })
      },
      _getMoreList(){
         if (this.isload == true) {
            return;
        }
        this.page++;
        this.isload = true;
        gameList("",this.page,"",this.typeId,"","")
            .then(res => {
            if (res.data.error == 0) {
                    let totalPage=res.data.content.totalPage;
                    res = res.data.content.data;
                    this.isload = false;
                    this.gamesList = this.gamesList.concat(res);
                    if(this.page==totalPage){
                    this.more = false;
                    this.isload = true;
                }
            }
        })
      },
      showModal(){
          this.showBar=true;
      },
      hideBar(){
          this.showBar=!this.showBar;
      },
      goback(){
        if (window.history.length <= 1) {
            this.$router.push({path:'/'})
        } else {
            this.$router.go(-1)
        }
      },
      handleChange (item,index) {
          Toast.clear();
          this.typeId=item.id;
          this.gamesList = [];
          this.showLoading = true;
          this.more = true;
          this.isload = false;
          this.page = 1;
          this.getList();
          this.$router.replace({
            path: `/gameHall/${item.id}/${index}`
        });

     },
     goDetail(item) {
      let id=item.id;
      this.$router.push({
        path: `/gameDetail/${id}`,

      });
    }
  },
  activated() {
    if(!this.$route.meta.isBack){
        this.category=[];
        this.gamesList=[];
        this.page=1;
        this.init();
    }
    this.$route.meta.isBack=false
    
    },
    beforeRouteEnter(to, from, next) {
        if(from.name == 'gameDetail'){
            to.meta.isBack = true;
            to.meta.keepAlive = true;
        } 
        next();
    },
  components:{
    gameSearch,
    Scroll,
    Loading,
    Loadinglist
  }
};
</script>

<style scoped lang="scss">
 @import '~styles/variable.scss';
 @import '~styles/mixins.scss'; 
 .top-wrapper{
     position:fixed;
     top:0;
     left:0;
     z-index:999;
     background:#fff;
     width:100%;
 }
 .placeholder{
     width:100%;
     height:1.6rem;
 }
 .header-bar{
    display:flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding:0 0.2rem;
    width: 7.5rem;
    margin: 0 auto;
    height: 0.8rem;
    line-height:0.8rem;
    background: #00d9cc;
    .name{
        .icon{
            vertical-align: top;
            padding: 0 0.1rem;
            font-size: 0.4rem;
            color: #fff;
        }
        span{
            color:#fff;
            font-size:$font-size-l;
        }
    }
    .search{
        display:flex;
        align-items: center;
        width:2.4rem;
        height:0.65rem;
        line-height:0.65rem;
        background:#fff;
        border-radius:5px;
        .search-icon{
            display:inline-block;
            vertical-align: top;
            width:0.38rem;
            height:0.38rem;
            margin: 0 0.2rem;
            background-size: 0.38rem 0.38rem;
            background-repeat: no-repeat;
            @include bg-image('../../assets/image/icon_search');
        }
        span{
            font-size:$font-size-m;
            color:#c7c6cc;
        }
    }
 }
 .main-container{
     padding-bottom:0.2rem;
 }
 .game-list{
    padding: 0 0.4rem;
 }
 .item {
    display: flex;
    min-height: 1.75rem;
    margin-top: 0.22rem;
    .avator {
    img {
        width: 1.6rem;
        height: 1.6rem;
    }
    }
    .info {
        flex: 1;
        margin-left: 0.16rem;
        display: flex;
        justify-content: space-between;
        padding-bottom: 0.22rem;
        border-bottom: 1px solid #f2f2f2;
    .desc {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .name{
        font-size:$font-size-m;
        }
        .type {
        color: #8e8d93;
        }
        .label{
        margin-top:0.1rem;
        span{
            float: left;
            padding: 0.02rem 0.06rem;
            color: #fff;
            margin: 0.02rem;
            border-radius: 4px;
            font-size:9px;
        }
        }
    }
    .down {
        margin-top:0.2rem;
        width: 1.2rem;
        height: 1.2rem;
        line-height:1.2rem;
        text-align: center;
        font-size: 0.3rem;
        color: $color-block;
        border: 1px solid $color-block;
        border-radius: 0.6rem;
    }
    }
    &.item-type1{
    padding: 0 0.4rem;
    }
}
.icon_hb{
      display:inline-block;
      vertical-align: top;
      margin-top:.03rem;
      width:.82rem;
      height:.3rem;
      @include bg-image('../../assets/image/s_hb');
      background-size:100% 100%;
      background-repeat: no-repeat;
}
</style>